<template>
  <div class="conter">
    <van-nav-bar :title="itemTitle" left-arrow @click-left="$router.back()" />
    <van-dropdown-menu
      :overlay="false"
      :close-on-click-overlay="false"
      :close-on-click-outside="false"
    >
      <van-dropdown-item
        :title="itemTitle"
        v-model="value"
        ref="item"
        @open="menuOpen"
        @close="menuClose"
      >
        <van-tree-select
          height="65vh"
          :items="items"
          :main-active-index.sync="active"
          @click-nav="navIndex"
        >
          <template #content>
            <van-cell-group>
              <van-cell
                :title="item.name"
                :value="item.count"
                v-for="item in sub_categories[active]"
                :key="item.id"
                @click="closeFn(item.id, item.name)"
              />
            </van-cell-group>
          </template>
        </van-tree-select>
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value"
        title="排序"
        :options="option"
        @change="changeItem"
      />
      <van-dropdown-item title="筛选" ref="itemmode">
        <div class="mode">
          <div class="modefrist">
            <h4>配送方式</h4>
            <van-button
              :icon="item.icon"
              size="small"
              v-for="(item, index) in changeListfrist"
              :key="index"
              :class="{ active: item.isActive }"
              @click="activeFristFn(index)"
              >{{ item.name }}</van-button
            >
          </div>
          <div class="modefrist">
            <h4>商家属性（可以多选）</h4>
            <!-- <van-button icon="plus" size="small">品牌商家</van-button>
            <van-button icon="plus" size="small">外卖保</van-button>
            <van-button icon="plus" size="small">准时达</van-button>
            <van-button icon="plus" size="small">新店</van-button>
            <van-button icon="plus" size="small">在线支付</van-button>
            <van-button icon="plus" size="small">开发票</van-button> -->
            <van-button
              :icon="item.icon"
              size="small"
              v-for="(item, index) in changeList"
              :key="index"
              :class="{ active: item.isActive }"
              @click="activeFn(index)"
              >{{ item.name }}
            </van-button>
          </div>
        </div>
        <div class="panel">
          <span class="clear" @click="changeClear">清空</span>
          <span class="sure" @click="changeSure"
            >确定
            <i v-show="total != 0">({{ total }}) </i>
          </span>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div
      class="itemlist"
      v-for="item in shoppingList"
      :key="item.id"
      @click="toMerchant(item.id)"
    >
      <div class="showtitle">
        <img :src="baseurl + '/img/' + item.image_path" alt="" />
        <div class="grader">
          <div class="title">
            <i>品牌</i>
            <span>{{ item.name }}</span>
          </div>
          <div class="graderone">
            <van-rate v-model="item.rating" readonly size="12px" gutter="0" />
            <span>{{ item.rating }}</span>
            <i>月售{{ item.recent_order_num }}单</i>
          </div>
          <div class="money">
            ￥20起送 / {{ item.piecewise_agent_fee.tips }}
          </div>
        </div>
        <!-- <van-rate v-model="valueone" readonly /> -->
      </div>
      <div class="writ">
        <span><i>保</i><i>准</i><i>票</i></span>
        <div class="song"><span>蜂鸟专送</span><i>准时达</i></div>
        <div class="time">
          {{ item.distance }}/<em>{{ item.order_lead_time }}</em>
        </div>
      </div>
    </div>
    <van-loading size="60px" color="#0094ff" v-if="isLoading"
      >加载中...</van-loading
    >
  </div>
</template>

<script>
import { categoryList, shoppingCategory } from "@/api/categoryList.js";
// import { geohash } from "@/api/citylist.js";
export default {
  data() {
    return {
      itemTitle: this.$route.query.title, // 下拉菜单第一个标题名称控制
      value: 0, // 下拉菜单第二个项与option中value属性绑定
      option: [
        { text: "智能排序", value: 0, icon: "sort" },
        { text: "距离最近", value: 5, icon: "location-o" },
        { text: "销量最高", value: 6, icon: "fire-o" },
        { text: "起送价最低", value: 1, icon: "after-sale" },
        { text: "配送速度最快", value: 2, icon: "underway-o" },
        { text: "评分最高", value: 3, icon: "star-o" },
      ],
      active: 0, // 分类选择的索引
      items: [], // 绑定分类选择的名称
      category: [], // 保存分类的所有数据
      sub_categories: [], // 保存二级分类的数据
      chooseId: 0, // 保存选择二级分类的id
      // 保存下拉菜单第三个项的渲染的数据
      changeListfrist: [{ name: "蜂鸟专送", isActive: false, icon: "plus" }],
      changeList: [
        { name: "品牌商家", isActive: false, icon: "plus", id: 8 },
        { name: "外卖保", isActive: false, icon: "plus", id: 7 },
        { name: "准时达", isActive: false, icon: "plus", id: 9 },
        { name: "新店", isActive: false, icon: "plus", id: 5 },
        { name: "在线支付", isActive: false, icon: "plus", id: 3 },
        { name: "开发票", isActive: false, icon: "plus", id: 4 },
      ],
      shoppingList: [], // 保存商品的信息
      baseurl: "//elm.cangdu.org",
      isLoading: true,
      support_ids: [],
      latitude:'23.174522',
      longitude:'113.320134'
    };
  },
  created() {
    if(this.$route.query.geohash){
      let arr =this.$route.query.geohash.split(',')
    this.latitude=arr[0]
    this.longitude=arr[1]
    console.log(161,arr);
    }
    
    // 请求商品分类的数据
    categoryList().then((res) => {
      console.log(res);
      this.category = res.data;
      this.category.forEach((item) => {
        // 对图片进行处理
        if (item.image_url.indexOf("png") != -1) {
          item.image_url = item.image_url.split("png");
          item.image_url = item.image_url[0] + ".png";
        } else {
          item.image_url = item.image_url.split("jpeg");
          item.image_url = item.image_url[0] + ".jpeg";
        }
        // console.log(item.image_url);
        this.items.push({
          // text: `<img src="${item.image_url}" alt="">` + item.name,
          text: item.name,
        });
        // 删除第一个不要的数据
        item.sub_categories.splice(0, 1);
        this.sub_categories.push(item.sub_categories);
      });
      console.log(this.items);
    });
    // 请求商品详情数据
    
      this.getShow({
      latitude: this.latitude,
      longitude: this.longitude,
      restaurant_category_id: 239,
    });
  },
  methods: {
    getShow(data) {
      this.isLoading = true;
      shoppingCategory(data).then((res) => {
        console.log(156, res);
        this.shoppingList = res.data;
        this.isLoading = false;
      });
    },
    getShowList() {
      // 判断是否为空不为空则再次发请求时清空
      if (this.support_ids.length > 0) {
        this.support_ids = [];
      }
      let data = {
        latitude: "23.126101",
        longitude: "113.427383",
      };
      if (this.chooseId >= 0) {
        data.restaurant_category_ids = [this.chooseId];
      }
      if (this.value >= 0) {
        data.order_by = this.value;
      }
      if (this.changeListfrist[0].isActive) {
        data.delivery_mode = [1];
      }
      this.changeList.forEach((item) => {
        if (item.isActive) {
          this.support_ids.push(item.id);
        }
      });
      console.log(269, this.support_ids);
      if (this.support_ids.length != 0) {
        data.support_ids = this.support_ids;
      }
      console.log(data);
      this.getShow(data);
    },
    navIndex() {
      console.log(this.active);
    },
    // 点击单元格关闭下拉菜单
    closeFn(id, name) {
      console.log(id, name);
      this.chooseId = id;
      this.itemTitle = name;
      // this.getShow({
      //   latitude: "23.126101",
      //   longitude: "113.427383",
      //   restaurant_category_ids: [id],
      // });
      this.getShowList();
      this.$refs.item.toggle();
    },
    // 打开下拉菜单触发的事件
    menuOpen() {
      this.itemTitle = "分类";
    },
    // 关闭菜单触发的事件
    menuClose() {
      if (this.chooseId) {
        return;
      }
      this.itemTitle = this.$route.query.title;
    },
    // 给第三个下拉按钮中的按钮做事件
    activeFristFn(index) {
      this.changeListfrist[index].isActive =
        !this.changeListfrist[index].isActive;
      this.changeListfrist[index].icon = this.changeListfrist[index].isActive
        ? "success"
        : "plus";
    },
    // 给第三个下拉按钮中的按钮做事件
    activeFn(index) {
      this.changeList[index].isActive = !this.changeList[index].isActive;
      this.changeList[index].icon = this.changeList[index].isActive
        ? "success"
        : "plus";
    },
    // 取消按钮事件
    changeClear() {
      // this.changeList[index].isActive;
      this.changeList.forEach((item) => {
        item.isActive = false;
      });
      this.changeListfrist.forEach((item) => {
        item.isActive = false;
      });
    },
    // 确认按钮事件
    changeSure() {
      this.getShowList();
      this.$refs.itemmode.toggle();
    },
    // 下拉列表第二下拉按钮选择事件
    changeItem(value) {
      this.order_by = value;
      console.log(value);
      /* this.getShow({
        latitude: "23.126101",
        longitude: "113.427383",
        order_by: value,
      }); */
      this.getShowList();
    },
    // 点击商家跳转到商家详情页
    toMerchant(id) {
      this.$router.push({
      path:'/shopping',
      query:{
        id
      }
    })
    },
  },
  computed: {
    // 绑定确认按钮的显示选中数量
    total() {
      // return this.changeList.filter((item) => item.isActive == true).length;
      return [...this.changeListfrist, ...this.changeList].filter(
        (item) => item.isActive == true
      ).length;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  border-bottom: 1px solid #d4d3d3;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
/deep/.van-dropdown-menu__title--active {
  color: #3190e8;
}
.van-tree-select__nav {
  flex: 2;
  .van-sidebar-item--select::before {
    background-color: #3190e8;
  }
}
/deep/.van-dropdown-item__option--active {
  color: #3190e8;
}
/deep/.van-dropdown-item__icon {
  color: #3190e8;
}
/deep/.van-dropdown-menu__bar {
  box-shadow: 0 0 0 rgb(100 101 102 / 12%);
}
/* /deep/.van-cell__title {
  color: red;
  &::before {
    content: "13";
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: green;
  }
} */
.mode {
  padding: 0 15px;
  .modefrist {
    margin: 15px 0;
    h4 {
      font-size: 15px;
      margin-bottom: 10px;
    }
    /deep/.van-button--default {
      margin-top: 10px;
      border: 1px solid #ccc;
      width: 105px;
      height: 35px;
      text-align: start;
      .van-button__content {
        justify-content: start;
      }
    }
    .van-button--default:nth-child(n + 2) {
      margin: 0 5px;
    }
    .van-button--default:nth-child(n + 3) {
      margin-top: 5px;
    }
    .active {
      color: #3190e8;
    }
  }
}
.panel {
  height: 60px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  .clear {
    height: 50px;
    width: 45vw;
    line-height: 50px;
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
    font-size: 22px;
  }
  .sure {
    height: 50px;
    width: 45vw;
    line-height: 50px;
    background-color: #56d176;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    font-size: 22px;
  }
}
.itemlist {
  height: 70px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px 6px;
  border-top: 1px solid #ddd;
  img {
    display: inline-block;
    width: 60px;
    height: 60px;
  }

  .showtitle {
    display: flex;
    .grader {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 10px;
      .title {
        display: flex;
        i {
          display: inline-block;
          height: 15px;
          line-height: 15px;
          width: 30px;
          font-size: 12px;
          font-weight: bold;
          background-color: #ffd930;
          text-align: center;
          margin-right: 5px;
        }
        span {
          font-weight: bold;
          font-size: 14px;
          display: inline-block;
          width: 110px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .graderone {
        width: 145px;
        margin-top: 10px;
        span {
          color: #ff9528;
          font-size: 14px;
          margin: 0 3px;
        }
        i {
          font-size: 12px;
        }
      }
      .money {
        font-size: 12px;
        margin-top: 10px;
      }
    }
    /* .titleh2 {
      display: flex;
      flex-direction: column;
    } */
  }
  .writ {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 80px;
    span {
      i {
        display: inline-block;
        width: 15px;
        height: 15px;
        font-size: 12px;
        text-align: center;
        line-height: 15px;
        border: 1px solid #ccc;
        margin-left: 3px;
      }
    }
    .song {
      display: flex;
      span {
        width: 55px;
        height: 15px;
        font-size: 10px;
        display: inline-block;
        color: #fff;
        text-align: center;
        line-height: 15px;
        background-color: #3190e8;
        margin-top: 11px;
      }
      i {
        display: inline-block;
        width: 40px;
        font-size: 10px;
        color: #3190e8;
        text-align: center;
        height: 15px;
        line-height: 15px;
        margin-left: 3px;
        border: 1px solid #3190e8;
        margin-top: 10px;
      }
    }
    .time {
      width: 140px;
      font-size: 10px;
      margin-top: 12px;
      display: flex;
      justify-content: end;
      em {
        font-size: 1vw;
        color: #3190e8;
      }
    }
  }
}
.van-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>